<template>
  <div id="radarBox" ref="radarBox" style="width: 600px; height: 400px"></div>
</template>

<script>
// 完整加载echarts
// 注意：echarts从5开始没有默认导出了
// 不允许：import Echarts from 'echarts'
import * as Echarts from 'echarts'
// 1.script 的src引入echarts的js文件
// 2.给个容器，给个宽高，给id
// 3.通过let echarts=Echarts.init(挂载的DOM节点)
// 4.echarts.setOption(配置)
import radarData from '@/views/dashboard/components/radarData'
export default {
  name: 'Radar',
  mounted() {
    // 生命周期最早可以使用$refs的位置是在mounted里面。因为这个时候组件dom才渲染好
    // let echarts=Echarts.init(document.querySelector('#radarBox'))
    // 实例化echarts对象
    this.echarts = Echarts.init(this.$refs.radarBox)
    // 设置配置
    this.echarts.setOption(radarData)
    // 请求网络数据
    this.initData()
  },
  methods: {
    // 获取图标数据
    initData() {
      // 模拟ajax
      setTimeout(() => {
        const value1 = [4200, 3000, 20000, 35000, 50000, 18000]
        const value2 = [5000, 14000, 28000, 26000, 42000, 21000]
        // 处理数据
        radarData.series[0].data[0].value = value1
        radarData.series[0].data[1].value = value2
        // 重新绘制
        this.echarts.setOption(radarData)
      }, 1000)
    }
  }
}
</script>

<style></style>
